<template>
    <el-date-picker v-model.trim="value" type="date" align="right" :picker-options="pickerOptions" :placeholder="placeholder" @change="change" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
</template>
<script>
export default {
    name: 'SearchDatePicker',
    data() {
        return {
            value: '',
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    },
                    {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }
                ]
            }
        };
    },
    props: {
        placeholder: {
            required: false,
            default: ''
        },
        change: Function
    }
};
</script>
<style scoped>
.el-date-picker {
    margin: 0 10px;
}
</style>